<template>
  <div class="app-container">
    <el-card shadow="always" style="height: 710px">
      <div slot="header">
        <span class="add-title">检查新增</span>
      </div>

      <el-form
        class="add-form"
        :model="form"
        ref="form"
        :rules="rules"
        :inline="false"
        size="normal"
        label-position="right"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span class="title" style="margin-left: 10px">当事人</span>
            <el-form-item label="类型:">
              <el-radio-group v-model="form.partyType">
                <el-radio :label="1">个人</el-radio>
                <el-radio :label="2">公司</el-radio>
                <el-radio :label="3">场所</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input v-model="form.name" placeholder="请输入"> </el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
              <el-input v-model="form.photo" placeholder="请输入"> </el-input>
            </el-form-item>
            <el-form-item label="身份证号:">
              <el-input v-model="form.idNumber" placeholder="请输入"> </el-input>
            </el-form-item>
            <el-form-item label="家庭住址:">
              <el-input v-model="form.familyAddress" placeholder="请输入"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0"
            ><span class="title">案件信息</span>
            <el-form-item label="检查类型:">
              <el-select
                style="width: 100%"
                v-model="form.type"
                value-key=""
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检查地点:">
              <el-input v-model="form.examineAddress" placeholder="请输入"> </el-input>
            </el-form-item>
            <el-form-item label="执法领域:">
              <el-select
                v-model="form.enforceDomain"
                value-key=""
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="办案人员" prop="phName">
              <el-select
                style="width: 100%"
                v-model="form.phName"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择"
              >
                <el-option
                  v-for="item in personList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="记录人员:">
              <el-input v-model="form.recordPerson" placeholder="请输入"> </el-input> </el-form-item
          ></el-col>
          <el-col :span="6" :offset="0"
            ><span class="title">处置情况</span>
            <el-form-item label="是否修改:">
              <el-radio-group v-model="form.isAmend">
                <el-radio v-for="item in whether" :key="item.value" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="复查日期:">
              <el-date-picker v-model="form.reviewTime" placeholder="请输入"> </el-date-picker>
            </el-form-item>
            <el-form-item label="立案情况:">
              <el-input v-model="form.familyAddress" placeholder="请输入"> </el-input>
              <!-- <el-input v-model="form.registerCase" placeholder="请输入"> </el-input> -->
            </el-form-item>
            <el-form-item label="立案日期:">
              <el-date-picker v-model="form.registerTime" placeholder="请输入">
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="6" :offset="0"
            ><span class="title">现场情况</span
            ><el-form-item label="是否发现问题:" class="special-label">
              <el-radio-group v-model="form.isAmend">
                <el-radio v-for="item in whether" :key="item.value" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group> </el-form-item
            ><el-form-item label="是否下达文书:" class="special-label">
              <el-radio-group v-model="form.isWenshu" class="special-label">
                <el-radio v-for="item in whether" :key="item.value" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="文书编号:" class="special-label">
              <el-input v-model="form.wenshuId"> </el-input> </el-form-item
            ><el-form-item label="是否采取强制措施:" class="special-label">
              <el-radio-group v-model="form.isConstraint">
                <el-radio v-for="item in whether" :key="item.value" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="现场照片:" class="special-label"
              ><image-upload v-model="form.sceneImage"></image-upload> </el-form-item
          ></el-col>
        </el-row>

        <el-form-item class="submit-btn">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { personnelDispose } from '@/api/property/dispose.js'

export default {
  data() {
    return {
      stateOptions: [
        { value: 0, label: '异常' },
        { value: 1, label: '举报' }
      ],
      // 办案人员列表
      personList: [],
      whether: [
        { label: '是', value: 1 },
        { label: '否', value: 2 }
      ],
      form: {},
      rules: {}
    }
  },
  methods: { onSubmit() {} },
  created() {
    // 处理办案人员数据
    personnelDispose().then((e) => {
      this.personList = e
    })
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .add-title {
    font-weight: 800;
    font-size: 18px;
  }
  .add-title::before {
    content: '';
    position: relative;
    display: inline-block;
    background-color: #1890ff;
    width: 4px;
    height: 15px;
    top: 1px;
    margin-right: 8px;
  }
  ::v-deep .add-form {
    .title {
      font-size: 16px;
      font-weight: 700;
    }
    .submit-btn {
      text-align: center;
      margin-top: 50px;
    }
    .title::before {
      content: '';
      margin-bottom: 3px;
      margin-right: 5px;
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #1890ff;
    }
    .special-label {
      .el-form-item__label {
        text-align: right !important;
        flex: 1.3 !important;
        text-align: left;
      }
    }
    .el-form-item {
      display: flex;
      margin-bottom: 20px;
      justify-content: flex-start;
      .el-form-item__label {
        flex: 0.7;
        height: 20px;
        margin-bottom: 5px;
        color: black;
        font-size: 15px;
        font-weight: 400;
      }
      .el-date-editor {
        width: 100%;
      }
      .el-form-item__content {
        flex: 2;
        margin-left: 0 !important;
        height: 20px;
        .el-input__inner {
          height: 30px;
        }
      }
    }
  }
}
</style>
